<template>
  <div :style="styleObject" class="scale-box">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted ,
computed,
watch,
onUnmounted
} from 'vue';
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/


const prop =   defineProps({
  width:  {
      type: Number,
       default: 1920,
    },
     height:  {
      type: Number,
        default: 1080,
    },
    module:  {
      type: String,
       default: 'fit',//fit scrollY scrollX full
    }
})


 let  getScale = ()=> {
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      let ww = window.innerWidth / prop.width
      let wh = window.innerHeight / prop.height
      return ww < wh ? ww : wh
    }
     let  setScale = ()=> {
        // 获取到缩放比，设置它
      let scale = getScale()
      state.scale = scale
    }
 
const styleObject = computed(() => {
   let obj = {
        transform: `scale(${state.scale}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${state.scale}) translate(-50%, -50%)`,
        width: prop.width + "px",
        height: prop.height + "px",
      }
       return obj
})

    const state:any = reactive({
     scale: getScale(),
 })
onMounted(() => {
     getScale()
    window.addEventListener("resize", setScale)
})
   onUnmounted(() => {
     window.addEventListener("resize", setScale)
    })
</script>

<style  scoped lang="scss" >
.scale-box {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>
